<div class="toast"></div>
<style>
  .toast {
    position: fixed;
    top: 40%;
    height: 35px;
    line-height: 35px;
    left: 15%;
    width: 70%;
    font-size: 13px;
    background-color: #bbb;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    opacity: 0;
    z-index: 99999999;
    display: none;
  }
</style>
<script>
  ;(function  () {
    function ToastTip (className) {
      this.toasting = false;
      this.textArr = [];
      this.text = '';
      this.className = className || 'toast';
      this.isDisplaying = false;
    }

    ToastTip.prototype.show = function (text) {
      this.textArr.push(text)
      if(!this.isDisplaying){
        this.display();
      }
    }

    ToastTip.prototype.display = function () {
      var that = this;
      this.text = this.textArr.pop();
      if (this.text === undefined) {
        this.isDisplaying = false
        return
      }
      this.isDisplaying = true
      var $ele = $('.' + this.className);
      $ele.html(this.text).show().animate({opacity: '1'}, 400, function () {
        $ele.animate({opacity: '0'}, 200, undefined, function () {
          $ele.hide();
          // 循环剩余textArr
          that.display();
        }, 1600)
      });
    }

    window.toastTip = new ToastTip('toast');
  })()
</script>
